<template>
    <div class="order-report">
        <div class="report-table-top-title" style="height: 50px">
            {{ agentName }}
            <div style="float: right">
                <el-button type="primary" size="small" plain @click="getPage"
                    >刷新库存</el-button
                >
                <el-button type="danger" size="small" plain @click="toMain"
                    >返回</el-button
                >
            </div>
        </div>

        <div class="report-table-form1">
            <div>
                <div class="report-table-form1-line">
                    <div
                        v-for="(item, index) in devicestock"
                        :key="index"
                        class="report-table-form1-item word samll"
                        style="width: 250px"
                    >
                        {{ item }}
                    </div>
                    <el-button
                        type="primary"
                        size="small"
                        @click="showReOrder"
                        v-show="false"
                        >商家退库</el-button
                    >
                </div>
            </div>
            <div class="report-table-form1-line">
                <div
                    v-for="(item, index) in softwarenum"
                    :key="index"
                    class="report-table-form1-item word samll"
                    style="width: 250px"
                >
                    {{ item }}
                </div>
            </div>
            <div class="report-table-form1-line">
                <span style="margin-bottom: 10px">
                    <div
                        class="report-table-form1-item word samll"
                        style="width: 155px"
                    >
                        主板SN码/整机序列号:
                    </div>
                    <div class="report-table-form1-item" style="width: 180px">
                        <el-input
                            v-model="searchNo"
                            placeholder
                            size="small"
                        ></el-input>
                    </div>
                    <div
                        class="report-table-form1-item word samll"
                        style="width: 70px"
                    >
                        设备类型:
                    </div>
                    <div class="report-table-form1-item" style="width: 180px">
                        <el-select
                            v-model="terminalTypeSearch"
                            placeholder="请选择"
                            size="small"
                        >
                            <el-option
                                v-for="(item, index) in terminalTypeList"
                                :key="index"
                                :label="item.terminalTypeName"
                                :value="item.terminalType"
                            ></el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" size="small" @click="search"
                        >搜索</el-button
                    >
                    <el-button
                        type="primary"
                        size="small"
                        @click="showDialog2"
                        v-show="manageRoleType === 0"
                        >手动添加商务订单</el-button
                    >
                    <el-button
                        type="primary"
                        size="small"
                        @click="showDialog"
                        v-show="manageRoleType === 0"
                        >添加设备</el-button
                    >
                    <div
                        class="report-table-form1-item"
                        style="width: 100px"
                    ></div>
                </span>
            </div>
        </div>
        <div class="page-padding-gray-small"></div>
        <div class="report-table-wrapper">
            <el-table
                :header-cell-style="headerCellStyle"
                size="small"
                :data="marketterminallist"
                border
                style="width: 100%"
            >
                <el-table-column
                    prop="chipID"
                    label="主板SN码"
                    width="200"
                ></el-table-column>
                <el-table-column
                    prop="terminalTypeName"
                    label="设备类型"
                ></el-table-column>
                <el-table-column prop="deliveryTime" label="发货时间">
                    <template slot-scope="props">
                        <div>{{ $F(props.row.deliveryTime) }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="chipCode"
                    label="整机序列号"
                ></el-table-column>
                <el-table-column prop="statusName" label="状态">
                </el-table-column>
                <el-table-column prop="managementTypeName" label="经营类型">
                </el-table-column>
                <el-table-column prop="companyName" label="商家名称">
                </el-table-column>
                <el-table-column label="操作" width="140" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            v-if="scope.row.status===1"
                            type="primary"
                            @click="showValue=true;currRow=scope.row"
                            >变更代理商</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="report-table-block">
            <div class="report-table-block-in">
                <el-pagination
                    background
                    :current-page.sync="position"
                    @current-change="handleCurrentChange"
                    :page-size="20"
                    layout="prev, pager, next, total"
                    :total="totalNum"
                ></el-pagination>
            </div>
        </div>

        <div class="page-padding"></div>

        <el-dialog
            title="变更软件套数"
            :visible.sync="dialogFormVisible2"
            width="600px"
        >
            <el-form label-position="right">
                <el-form-item label="输入数量" :label-width="formLabelWidth">
                    <el-input
                        v-model="changeNum"
                        autocomplete="off"
                        placeholder
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="输入订单号"
                    :label-width="formLabelWidth"
                    class="red-lable"
                >
                    <!-- <el-form-item label="输入订单号" :label-width="formLabelWidth"> -->
                    <el-input
                        v-model="billNO"
                        autocomplete="off"
                        placeholder="销售平台订单号"
                        size="small"
                    ></el-input>
                    <!-- <el-input v-model="billNO" autocomplete="off"></el-input> -->
                </el-form-item>
                <el-form-item label="订单类型" :label-width="formLabelWidth">
                    <!-- <el-radio v-model="billType" :label="1">云管软件</el-radio>
                    <el-radio v-model="billType" :label="2">云管存储</el-radio>
                    <el-radio v-model="billType" :label="8">酒吧软件</el-radio>
                    <el-radio v-model="billType" :label="10">酒吧存储</el-radio> -->
                    <!-- 99表示利云云管利云酒吧软件套数，98表示娱加云酒吧软件套数 -->

                    <el-radio-group v-model="billType">
                        <el-radio
                            :label="item.managementType"
                            v-for="(item, index) in $store.state.typeList"
                            :key="index"
                            >{{ item.managementTypeName }}软件套数</el-radio
                        >
                    </el-radio-group>
                    <!-- <el-radio v-model="billType" :label="99"
                        >利云酒吧软件套数</el-radio
                    >
                    <el-radio v-model="billType" :label="100"
                        >养生软件套数</el-radio
                    > -->
                    <!-- <el-radio v-model="billType" :label="98">娱加云软件套数</el-radio> -->
                </el-form-item>
                <el-form-item label="说明" :label-width="formLabelWidth">
                    <el-input
                        type="textarea"
                        v-model="info2"
                        size="small"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDevice" size="small">变 更</el-button>
                <!-- <el-button type="primary" @click="removeDevice" size="small">减 少</el-button> -->
            </div>
        </el-dialog>

        <el-dialog
            title="添加设备"
            :visible.sync="dialogFormVisible"
            width="600px"
        >
            <el-form label-position="right">
                <el-form-item label="主板SN码" :label-width="formLabelWidth">
                    <el-input
                        v-model="chipID"
                        autocomplete="off"
                        placeholder
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item label="整机序列号" :label-width="formLabelWidth">
                    <el-input
                        v-model="chipCode"
                        autocomplete="off"
                        placeholder
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item label="说明" :label-width="formLabelWidth">
                    <el-input
                        type="textarea"
                        v-model="info"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-radio-group v-model="terminalType" @change="changeType">
                        <el-radio
                            :label="item.terminalType"
                            v-for="(item, index) in radioList"
                            :key="index"
                            >{{ item.terminalTypeName }}</el-radio
                        >
                    </el-radio-group>
                </el-form-item>
                <!-- <div
                    class="tipPic2"
                    :style="{ background: 'url(' + terminalTypeImageUrl + ')' }"
                ></div> -->
                <div class="a">
                    <img class="a" :src='terminalTypeImageUrl' width="100%" @click="prevViewImg"/>
                    <!-- <el-image fit="contain" class="tipPic2" style="width: 560px; height: 200px" :preview-src-list="[terminalTypeImageUrl]" :src='terminalTypeImageUrl'></el-image> -->
                </div>
                <el-dialog title="图片预览" :visible.sync="prevViewImgShow" width="70%" :modal="false">
                    <div class="prev-view-img-box">
                        <img class="a" :src='terminalTypeImageUrl' style="max-width: 100%;" />
                    </div>
                </el-dialog>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog" size="small">取 消</el-button>
                <el-button type="primary" @click="okDialog" size="small"
                    >确 定</el-button
                >
            </div>
        </el-dialog>

        <el-dialog title="商家退库" :visible.sync="reOrderShow" width="400px">
            <el-form label-position="right">
                <el-form-item label="商家编号" :label-width="formLabelWidth">
                    <el-input
                        v-model="companyCode"
                        autocomplete="off"
                        placeholder
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="商家联系电话"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        v-model="telPhone"
                        autocomplete="off"
                        placeholder
                        size="small"
                    ></el-input>
                </el-form-item>
                <div class="div-lable"></div>
                <el-form-item
                    label="包厢退库点数"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        v-model="softKey"
                        autocomplete="off"
                        placeholder
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="存储空间退库点数"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        v-model="dataKey"
                        autocomplete="off"
                        placeholder
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input
                        type="textarea"
                        v-model="explain"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-radio v-model="type" :label="2">利云酒吧</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelReOrder" size="small">取 消</el-button>
                <el-button type="primary" @click="okReOrder" size="small"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
        <setAgent :value.sync='showValue' :currRow='currRow' @getList='getPage'></setAgent>
    </div>
</template>

<script type="text/ecmascript-6">
import setAgent from './components/setAgent.vue'
export default {
    data: function () {
        return {
            showValue: false,
            currRow: {},
            terminalTypeList: [],
            terminalTypeSearch: -1,
            softwarenum: [],
            devicestock: [],
            radioList: [],
            terminalType: 1, // 设备类型 0KTV 1酒吧

            totalNum: 0,
            position: 1, // 页码

            notactivebarnum: 0, // EMT100Y剩余库存
            /* notactivektvnum: 0, // EMT100T剩余库存
            unregistedbardatainventorycount: 0, // 酒吧云存储库存数
            unregistedbarsoftwarecount: 0, // 酒吧未注册软件点数 */

            num100x: 0,
            num100bel: 0,
            unregistedsoftwarecount: 0, // 云管未注册套数
            notactiveterminalnum: 0,
            totalbarsoftpackagecount: 0, // 酒吧软件套数库存总数
            unregistedbarsoftpackagecount: 0, // 酒吧软件已使用套数
            unregisteddatainventorycount: 0,
            totalyunbarsoftpackagecount: 0, // 娱加云软件套数
            unregistedyunbarsoftpackagecount: 0, // 娱加云 剩余软件套数
            yssoftwareinventory: 0, // 养生库存
            ysunusesoftwareinventory: 0, // 养生剩余
            marketterminallist: [],

            billNO: '', // 订单号
            changeNum: '',
            formLabelWidth: '130px',
            info2: '',
            info: '',
            chipID: '',
            chipCode: '',
            dialogFormVisible: false,
            dialogFormVisible2: false,
            reOrderShow: false, // 商家退库控制按钮
            terminalTypeImageUrl: '',
            prevViewImgShow: false, // 图片预览
            companyCode: '',
            dataKey: '',
            explain: '',
            softKey: '',
            telPhone: '',
            type: 2,

            billType: null,

            searchNo: ''
        }
    },
    mounted () {
    },
    created () {
        this.getTerminalType()
        this.getOnlyTerminalType()
        this.getPage()
    },
    watch: {
        position () {
            this.getPage()
        }
    },
    components: {
        setAgent
    },
    props: {
        underLine: null
    },
    computed: {
        manageArr () {
            console.log(this.$store.state.manageArr)
            return this.$store.state.manageArr
        },
        manageRoleType () {
            return this.$store.state.manageRoleType
        },
        agentName () {
            return this.$store.state.page2StoreManageAgentName
        },
        agentId () {
            return this.$store.state.page2StoreManageAgentId
        }
    },
    methods: {
        prevViewImg () {
            // 预览图片
            this.prevViewImgShow = true
        },
        changeType (val) {
            console.log(val)
            this.radioList.some(item => {
                if (item.terminalType === this.terminalType) {
                    this.terminalTypeImageUrl = item.terminalTypeImageUrl
                }
            })
            this.$forceUpdate()
        },
        showMessage (message) {
            this.$message({
                showClose: true,
                message: message,
                type: 'warning'
            })
        },

        // 对应软件套数增减
        addDevice () {
            let message = ''
            if (this.changeNum === '') {
                message = '请选输入数量'
            }
            if (this.isNumChar2(this.changeNum)) {
                message = '数量必须为数字值'
            }
            if (this.info2 === '') {
                message = '请输入说明'
            }
            if (this.billNO === '') {
                message = '请输入订单号'
            }
            if (!this.billType) {
                message = '请选择订单类型'
            }
            if (message !== '') {
                this.showMessage(message)
                return
            }
            this.dialogFormVisible2 = false
            this.$http.post(this.$store.state.IP + '/system/stock/increaseSoftwareInventory', {
                data: {
                    agentId: this.agentId,
                    billNO: this.billNO,
                    num: this.changeNum,
                    managementType: this.billType,
                    explain: this.info2
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('增加套数成功')
                    console.log(response.data)
                    this.changeNum = ''
                    this.billNO = ''
                    this.info2 = ''
                    this.getPage()
                }
                if (response.ret !== '0') {
                    console.log('增加套数失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        removeDevice () {
            let message = ''
            if (this.changeNum === '') {
                message = '请选输入数量'
            }
            if (this.info2 === '') {
                message = '请输入说明'
            }
            if (message !== '') {
                this.showMessage(message)
                return
            }
            this.$http.post(this.$store.state.IP + '/system/stock/reduceSoftwareInventory', {
                data: {
                    agentId: this.agentId,
                    billNO: this.billNO,
                    num: this.changeNum,
                    billType: this.billType,
                    explain: this.info2
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('减少套数成功')
                    console.log(response.data)
                    this.dialogFormVisible2 = false
                    this.changeNum = ''
                    this.billNO = ''
                    this.info2 = ''
                    this.getPage()
                }
                if (response.ret !== '0') {
                    console.log('减少套数失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        showDialog2 () {
            this.dialogFormVisible2 = true
        },
        showReOrder () {
            this.reOrderShow = true
        },
        cancelReOrder () {
            this.companyCode = ''
            this.dataKey = ''
            this.explain = ''
            this.softKey = ''
            this.telPhone = ''
            this.type = 0
            this.reOrderShow = false
        },
        okReOrder () {
            let message = ''
            if (this.explain === '') {
                message = '请输入备注'
            }
            if (this.dataKey === '') {
                message = '请输入存储空间退库点数'
            }
            if (this.softKey === '') {
                message = '请输入包厢退库点数'
            }
            if (this.telPhone === '') {
                message = '请输入商家联系电话'
            }
            if (this.companyCode === '') {
                message = '请输入商家编号'
            }
            if (message !== '') {
                this.showMessage(message)
                return
            }
            this.reOrderShow = false
            this.$http.post(this.$store.state.IP + '/system/stock/reOrderSoftwareInventory', {
                companyCode: this.companyCode,
                dataKey: this.dataKey,
                explain: this.explain,
                softKey: this.softKey,
                telPhone: this.telPhone,
                type: this.type
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('添加设备成功')
                    console.log(response.data)
                    this.companyCode = ''
                    this.dataKey = ''
                    this.explain = ''
                    this.softKey = ''
                    this.telPhone = ''
                    this.type = 0
                    this.getPage()
                }
                if (response.ret !== '0') {
                    console.log('添加设备失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        // 对应设备添加
        cancelDialog () {
            this.chipID = ''
            this.chipCode = ''
            this.info = ''
            this.dialogFormVisible = false
        },
        okDialog () {
            let message = ''
            if (this.info === '') {
                message = '请输入说明'
            }
            if (this.chipID === '') {
                message = '请输入主板SN码'
            }
            if (this.chipCode === '') {
                message = '请输入整机序列号'
            }
            if (message !== '') {
                this.showMessage(message)
                return
            }
            this.dialogFormVisible = false
            this.$http.post(this.$store.state.IP + '/system/stock/addTerminalForAdmin', {
                data: {
                    agentId: this.agentId,
                    chipId: this.chipID,
                    chipCode: this.chipCode,
                    explain: this.info,
                    terminalType: this.terminalType
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('添加设备成功')
                    console.log(response.data)
                    this.chipID = ''
                    this.chipCode = ''
                    this.info = ''
                    this.getPage()
                }
                if (response.ret !== '0') {
                    console.log('添加设备失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        showDialog () {
            this.dialogFormVisible = true
        },

        toMain () {
            this.$store.dispatch('setSM', 0)
        },

        search () {
            this.position = 1
            this.getPage()
        },
        getOnlyTerminalType () {
            this.$http.get(this.$store.state.IP + '/system/company/getOnlyTerminalType?isAll=0', {
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.terminalTypeList = response.data
                    this.terminalTypeSearch = response.data.length > 0 ? this.terminalTypeList[0].terminalType : -1
                }
            }, response => {
            })
        },
        getTerminalType () {
            this.$http.get(this.$store.state.IP + '/system/company/getTerminalType', {
                data: {
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.radioList = response.data
                    this.terminalTypeImageUrl = this.radioList[0].terminalTypeImageUrl
                }
                if (response.ret !== '0') {
                }
            }, response => {
            })
        },
        getList () {
            this.$http.post(this.$store.state.IP + '/system/stock/searchTerminalForAdmin', {
                data: {
                    page: this.position - 1, // 页数
                    limit: 20, // 一页显示数量
                    agentId: this.agentId,
                    chipId: this.searchNo,
                    terminalType: this.terminalTypeSearch
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('搜索序列号成功')
                    console.log(response.data)
                    this.marketterminallist = response.data.list
                    this.totalNum = response.data.total
                }
                if (response.ret !== '0') {
                    console.log('搜索序列号失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        init () {
            this.getList()
            this.getPage()
        },
        getPage () {
            this.$http.post(this.$store.state.IP + '/system/stock/getStockByAgentForAdmin', {
                data: {
                    agentId: this.agentId
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('获取库存详情成功')
                    console.log(response.data)
                    this.unregistedsoftwarecount = response.data.unregistedsoftwarecount
                    this.notactiveterminalnum = response.data.notactiveterminalnum

                    this.totalbarsoftpackagecount = response.data.totalbarsoftpackagecount
                    this.unregistedbarsoftpackagecount = response.data.unregistedbarsoftpackagecount
                    this.notactivebarnum = response.data.notactivebarnum
                    this.totalyunbarsoftpackagecount = response.data.totalyunbarsoftpackagecount
                    this.unregistedyunbarsoftpackagecount = response.data.unregistedyunbarsoftpackagecount
                    this.yssoftwareinventory = response.data.yssoftwareinventory
                    this.ysunusesoftwareinventory = response.data.ysunusesoftwareinventory
                    this.num100bel = response.data.num100bel
                    this.num100x = response.data.num100x

                    this.devicestock = response.data.devicestock
                    this.softwarenum = response.data.softwarenum
                    /* this.unregistedbardatainventorycount = response.data.unregistedbardatainventorycount
                    this.unregistedbarsoftwarecount = response.data.unregistedbarsoftwarecount */
                    this.getList()
                }
                if (response.ret !== '0') {
                    console.log('获取库存详情失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        // 换页方法
        handleCurrentChange (val) {
            this.position = val
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.tipPic2
    width: 560px
    height: 200px
    // background: url('../../../../../common/pic/addDevicePic.png')
    background-repeat: no-repeat
    background-size: 100% 100%

.prev-view-img-box
    text-align: center

.div-lable
    height: 1px
    width: 100%
    background: #c0c4cc
    margin-bottom: 20px

.red-lable
    .el-form-item__label
        color: red

.el-transfer-panel
    width: 400px

.has-gutter
    .el-checkbox
        display: none

.order-report
    width: 100%
    background: #f1f0f5

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff
</style>
